// import { WebSocketContext } from '@/components'

import ChatMain from './ChatMain'
import ChatSidebar from './ChatSidebar'

// const { useWebSocketContext } = WebSocketContext

const Index = () => {
  const theme = useTheme()
  const matchUpMd = useMediaQuery(theme.breakpoints.up('md'))
  // const ws = useWebSocketContext()
  // const { sendMessage, readyState } = ws
  // useEffect(() => {

  // }, [readyState])

  const [drawerOpen, { toggle: drawerToggle }] = useBoolean(false)
  return (
    <Stack sx={{ alignItems: 'stretch', height: '100%' }} direction="row" role="presentation">
      <ChatSidebar drawerOpen={!matchUpMd ? drawerOpen : !drawerOpen} drawerToggle={drawerToggle} />
      <ChatMain drawerOpen={drawerOpen} drawerToggle={drawerToggle} />
    </Stack>
  )
}

export default Index
